<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Canvas Text</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }

        #canvasContainer {
            position: relative;
            display: inline-block;
        }

        #canvas {
            border: 1px solid black;
        }

        #textProperties {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>Interactive Canvas Text</h1>
    <input type="file" id="imageUpload" accept="image/*"><br><br>
    <button onclick="addText()">Add Text</button><br><br>
    <div id="textProperties">
        <label for="fontSize">Font Size:</label>
        <input type="number" id="fontSize" value="30">
        <label for="fontColor">Font Color:</label>
        <input type="color" id="fontColor" value="#000000">
        <label for="fontFamily">Font Family:</label>
        <select id="fontFamily">
            <option value="Arial">Arial</option>
            <option value="Verdana">Verdana</option>
            <option value="Times New Roman">Times New Roman</option>
        </select>
    </div>
    <div id="canvasContainer">
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
    <button onclick="downloadImage()">Download Image</button>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const imageUpload = document.getElementById('imageUpload');
        let uploadedImage = null;
        let texts = [];
        let currentTextIndex = null;
        let isDragging = false;
        let offsetX, offsetY;

        imageUpload.addEventListener('change', function (e) {
            const reader = new FileReader();
            reader.onload = function (event) {
                uploadedImage = new Image();
                uploadedImage.onload = function () {
                    canvas.width = uploadedImage.width;
                    canvas.height = uploadedImage.height;
                    drawCanvas();
                }
                uploadedImage.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
        });

        canvas.addEventListener('mousedown', function (e) {
            const mousePos = getMousePos(canvas, e);
            currentTextIndex = getTextUnderMouse(mousePos);
            if (currentTextIndex !== null) {
                isDragging = true;
                offsetX = mousePos.x - texts[currentTextIndex].x;
                offsetY = mousePos.y - texts[currentTextIndex].y;
            }
        });

        canvas.addEventListener('mousemove', function (e) {
            if (isDragging && currentTextIndex !== null) {
                const mousePos = getMousePos(canvas, e);
                texts[currentTextIndex].x = mousePos.x - offsetX;
                texts[currentTextIndex].y = mousePos.y - offsetY;
                drawCanvas();
            }
        });

        canvas.addEventListener('mouseup', function () {
            isDragging = false;
        });

        canvas.addEventListener('dblclick', function (e) {
            const mousePos = getMousePos(canvas, e);
            const textIndex = getTextUnderMouse(mousePos);
            if (textIndex !== null) {
                const newText = prompt("Edit text:", texts[textIndex].text);
                if (newText !== null) {
                    texts[textIndex].text = newText;
                    drawCanvas();
                }
            }
        });

        function getMousePos(canvas, evt) {
            const rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }

        function getTextUnderMouse(pos) {
            for (let i = texts.length - 1; i >= 0; i--) {
                const text = texts[i];
                ctx.font = `${text.fontSize}px ${text.fontFamily}`;
                const textWidth = ctx.measureText(text.text).width;
                const textHeight = text.fontSize;
                if (pos.x >= text.x && pos.x <= text.x + textWidth &&
                    pos.y >= text.y - textHeight && pos.y <= text.y) {
                    return i;
                }
            }
            return null;
        }

        function addText() {
            const fontSize = document.getElementById('fontSize').value;
            const fontColor = document.getElementById('fontColor').value;
            const fontFamily = document.getElementById('fontFamily').value;
            const newText = {
                text: "New Text",
                x: 50,
                y: 50,
                fontSize: parseInt(fontSize),
                fontColor: fontColor,
                fontFamily: fontFamily
            };
            texts.push(newText);
            drawCanvas();
        }

        function drawCanvas() {
            if (uploadedImage) {
                ctx.drawImage(uploadedImage, 0, 0);
            }
            texts.forEach(text => {
                ctx.font = `${text.fontSize}px ${text.fontFamily}`;
                ctx.fillStyle = text.fontColor;
                ctx.fillText(text.text, text.x, text.y);
            });
        }

        function downloadImage() {
            const link = document.createElement('a');
            link.download = 'canvas_image.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        }
    </script>
</body>

</html>